﻿@model OrderControllerModel.Index
<div class="ui-box ui-box-alpha">
    <div class="ui-box-head">
        <div class="ui-box-head-border">
            <div class="ui-box-head-title">
                收银台</div>
            <span class="ui-box-head-text">@(Order.CategoryDic.FirstOrDefault(o => o.Key == Model.Order.Category).Value)</span>
            @if (Model.Order.Category == OrderCategory.Normal)
            {
                <a href="#" class="ui-box-head-more">去购物</a>
            }
            else if (Model.Order.Category == OrderCategory.Auction)
            {
                <a href="#" class="ui-box-head-more">去竞购</a>
            }
        </div>
    </div>
    <div class="ui-box-container">
        <div class="ui-box-content ui-box-content">
            <div class="row">
                <div class="col-md-4">
                    您的账户： <span class="ft-weight-bold">@(User.Identity.Name)</span>
                </div>
                <div class="col-md-4">
                    账户余额：<span class="ft-green ft-weight-bold">
                        @(Model.Account.AvailableMoney.ToString("N"))<small class="ft-gray ft-weight-normal">(元)</small></span>
                </div>
                <div class="col-md-4">
                    <a href="/recharge" target="_blank">充值</a>
                </div>
            </div>
        </div>
    </div>
    <div class="ui-box-container-noborder">
        <div class="ui-box-content">
        </div>
    </div>
    <div class="ui-box-container-noborder">
        @if (Model.Order.Status == OrderStatus.WaitBuyerPay)
        {
            <table class="ui-table ui-table-alpha" style="border: none;">
                <thead>
                    <tr>
                        <th style="width: 250px;">
                            商 品
                        </th>
                        <th>
                            单价(元)
                        </th>
                        <th>
                            数 量
                        </th>
                        <th>
                            优惠(元)
                        </th>
                        <th>
                            赠积分
                        </th>
                        <th>
                            状 态
                        </th>
                        <th>
                            @if (Model.Order.Status == OrderStatus.Pending || Model.Order.Status == OrderStatus.WaitBuyerPay)
                            {
                                @:小计(元)
                            }
                            else
                            {
                                @:实付款(元)
                                                                                                                                                                                                                                                                                                                                                }
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @Model.Order.OrderItems.Each(@<tr>
                        <td title="@(item.Item.Name)">
                            <div class="media">
                                <a class="pull-left" href="@(string.Format("{0}/{1}.html", WebSite.Item, item.Item.Id))" target="_blank">
                                    <img class="media-object"  src="@(item.Item.Picture)" alt="@(item.Item.Name)" />
                                </a>
                                <div class="media-body">
                                    <h5 class="media-heading">
                                        @(item.Item.Name)</h5>
                                    <div>
                                        @foreach (var x in item.Item.PropTexts.OrderBy(x => x.Length))
                                        {
                                            <span>@x</span>
                                            <br />
                                        }
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            @(item.Item.Price.ToString("N"))
                        </td>
                        <td>
                            @item.Item.Quantity
                        </td>
                        <td>
                            @item.Item.Discount.ToString("N")
                        </td>
                        <td>
                        </td>
                        <td class="col">
                            @if (Model.Order.Status == OrderStatus.Pending || Model.Order.Status == OrderStatus.WaitBuyerPay)
                            {
                                <span>待付款</span>
                            }
                            else if (Model.Order.Status == OrderStatus.WaitSellerSend)
                            {
                                <span>已付款 待发货</span>
                            }
                            else if (Model.Order.Status == OrderStatus.Canceled)
                            {
                                <p>
                                    <span>已取消<a style="margin-left: 5px;" href="javascript:void(0);" title="@(Model.Order.CancelText)取消原因：@(Model.Order.CancelReason)"><i
                                        class="icon-bookmark"></i> </a></span>
                                </p>
                            }
                        </td>
                        @if (item.Index == 0)
                        {
                            <td rowspan ="@(Model.Order.OrderItems.Count + 1)" style="border-right: 1px solid #D9D9D9">
                                <p>
                                    <strong>@(Model.Order.Total.ToString("N"))</strong></p>
                                @if (Model.Order.Postage == 0)
                                {
                                    <p>
                                        <span>免运费</span></p>
                                }
                                else
                                {
                                    <p>
                                        <span>含快递：@(Model.Order.Postage.ToString("N"))</span></p>
                                }
                                <p>
                                    <span>订单优惠：@(Model.Order.Discount.ToString("N"))</span></p>
                            </td>
                               
                        }
                    </tr>)
                    <tr>
                        <td colspan="6" class="text-align-left" style="border-right: 1px solid #D9D9D9">
                            <p>
                                收货人：@(Model.Order.Receiver)
                                @(Model.Order.Mobile)
                                @(Model.Order.Phone)
                            </p>
                            <p>
                                收货地址：@(Model.Order.Province)
                                @(Model.Order.City)
                                @(Model.Order.District)
                                @(Model.Order.Address)
                                @(Model.Order.PostalCode)
                            </p>
                            @if (!Model.Order.Extra.IsNullOrEmpty())
                            {
                                <p>
                                    我的备忘：@(Model.Order.Extra)
                                </p>
                            }
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="7">
                            <p>
                                我的留言：@(Model.Order.BuyerMessage)
                            </p>
                            @if (Model.Order.Status == OrderStatus.WaitBuyerPay)
                            {
                                <p class="pull-right">
                                    待付款：<span class="order-info-total-price">@(Model.Order.Unpaid.ToString("N"))</span>元
                                </p>
                              
                            }
                            else if (Model.Order.Status == OrderStatus.WaitSellerSend)
                            {
                                <p class="pull-right">
                                    实付款： <span class="order-info-total-price">@(Model.Order.Paid.ToString("N"))</span>元
                                </p>
                            }
                        </td>
                    </tr>
                </tfoot>
            </table>
        }
        <div class="ui-box-container-head">
            <div class="row">
                <div class="col-md-2">
                    选择支付方式 @*<a class="ft-weight-normal" href="javascript:void(0);" onclick='$("#trade-info").slideToggle();'>
                        详细信息</a>*@
                </div>
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-7">
                            <span class="payment-amount">订单总金额@(Model.Order.Total.ToString("N"))-已支付金额@(Model.Order.Paid.ToString("N"))
                                =
                                @(Model.Order.Unpaid.ToString("N"))<small>元</small> </span>
                        </div>
                        <div class="col-md-offset-1 col-md-4">
                            <a class="payment-refresh-price" href="/order?param=@(Model.Order.Id)">刷 新</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="row">
                <div class="col-md-2">
                    <div style="border-right: 1px solid #ddd;">
                        <ul class="nav nav-tabs nav-tabs-left">
                            @if (Model.Account.AvailableMoney > 0 && (Model.Account.AvailableMoney >= Model.Order.Unpaid))
                            {
                                <li class="active"><a href="#balance" data-toggle="tab" style="border-top: none;">余额支付</a></li>
                                <li><a href="#ebank" data-toggle="tab">网银支付</a></li>
                            }
                            else
                            {
                                <li class="active"><a href="#ebank" data-toggle="tab" style="border-top: none;">网银支付</a></li>
                            }
                            <li><a href="#phone-card" data-toggle="tab">手机充值卡支付</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-10">
                    <div class="tab-content">
                        @if (Model.Account.AvailableMoney > 0 && (Model.Account.AvailableMoney >= Model.Order.Unpaid))
                        {
                            <div class="tab-pane active" id="balance">
                                <form id="pay-by-debit-balance" class="form-horizontal" action="/order/balance?param=@(Model.Order.Id)" method="post" onsubmit="return balancePay(this);">
                                <div class="form-group">
                                    <div class="col-md-offset-2 col-md-10">
                                        <p class="form-control-static">
                                            使用账户余额支付 <span class="ft-weight-bold" style="color: #FF6600;">
                                                @(Model.Order.Unpaid.ToString("N"))<small class="ft-gray ft-weight-normal">(元)</small></span></p>
                                    </div>
                                </div>
                                <div id="form-group-for-paypassword" class="form-group">
                                    <label class="col-md-2 control-label" for="paypassword">
                                        支付密码</label>
                                    <div class="col-md-4">
                                        <input id="paypassword" name="paypassword" type="password" class="form-control" maxlength="12"
                                            placeholder="请输入您的支付密码" />
                                    </div>
                                    <div class="col-md-3">
                                        <p id="help-block-for-paypassword" class="help-block">
                                            请输入支付密码！</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-offset-2 col-md-4">
                                        @Html.AntiForgeryToken()
                                        <button class="ui-btn ui-btn-alpha" type="submit">
                                            确认付款</button>
                                    </div>
                                    <div class="col-md-3">
                                    </div>
                                </div>
                                </form>
                            </div>
                        }
                        <div class="tab-pane @(Model.Account.AvailableMoney == 0 || (Model.Account.AvailableMoney > 0 && Model.Account.AvailableMoney < Model.Order.Unpaid) ? "active" : "")" id="ebank">
                            <form action="/pay/ebank/@(Model.Order.Id)" method="POST" target="_blank" onsubmit="return payByEBank(this);">
                            @if (Model.Account.AvailableMoney > 0 && Model.Account.AvailableMoney < Model.Order.Unpaid)
                            {
                                <div class="form-group">
                                    <div class="checkbox">
                                        账户可支付余额 <span class="ft-green ft-weight-bold">
                                            @(Model.Account.AvailableMoney.ToString("N"))<small class="ft-gray ft-weight-normal">(元)</small></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="useBalance" onclick="if (this.checked==true){this.value='true';}else{this.value='false';}" />
                                            使用账户余额支付 <span class="ft-weight-bold" style="color: #FF6600;">
                                                @(Model.Account.AvailableMoney.ToString("N"))<small class="ft-gray ft-weight-normal">(元)</small></span>
                                            ，剩余@((Model.Order.Unpaid - Model.Account.AvailableMoney).ToString("N"))元使用网银支付。
                                        </label>
                                    </div>
                                </div>
                            }
                            else
                            {
                                <div class="form-group">
                                    <p>
                                        使用网银支付 <span class="ft-weight-bold" style="color: #FF6600;">
                                            @(Model.Order.Unpaid.ToString("N"))<small class="ft-gray ft-weight-normal">(元)</small></span>
                                    </p>
                                </div>
                            }
                            @*<div class="form-group">
                                <div class="ebank ebank-express">
                                    <p>
                                        快捷支付</p>
                                    <ul class="list-inline">
                                        @foreach (var e in Model.EBanks)
                                        {
                                            <li>
                                                <label title="@(e.PaymentBank.Name)">
                                                    <input type="radio" name="param" value="@(e.Id)" data-platform="@(e.PlatformId)"/>
                                                    <img alt="@(e.PaymentBank.Name)" src="@(WebSite.Static + e.PaymentBank.Image)" />
                                                </label>
                                            </li>
                                        }
                                    </ul>
                                </div>
                            </div>*@
                            <div class="form-group">
                                <div class="ebank">
                                    <p>
                                        选择银行</p>
                                    <ul class="list-inline">
                                        @foreach (var e in Model.EBanks)
                                        {
                                            <li>
                                                <label title="@(e.PaymentBank.Name)">
                                                    <input type="radio" name="eBankId" value="@(e.Id)" data-platform="@(e.PlatformId)"/>
                                                    <img alt="@(e.PaymentBank.Name)" src="@(WebSite.Static + e.PaymentBank.Image)" />
                                                </label>
                                            </li>
                                        }
                                    </ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2">
                                    <button id="btn-pay-by-ebank" class="btn btn-danger btn-lg " type="submit" data-loading-text="订单支付中...">
                                        登录到网上银行支付</button></div>
                                <div class="col-md-10">
                                </div>
                            </div>
                            </form>
                        </div>
                        <div class="tab-pane" id="phone-card">
                            <form>
                            @if (Model.Account.AvailableMoney > 0 && Model.Account.AvailableMoney < Model.Order.Unpaid)
                            {
                                <div class="form-group">
                                    <div class="checkbox">
                                        账户可支付余额 <span class="ft-green ft-weight-bold">
                                            @(Model.Account.AvailableMoney.ToString("N"))<small class="ft-gray ft-weight-normal">(元)</small></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="usebalance" />
                                            使用账户余额支付 <span class="ft-weight-bold" style="color: #FF6600;">
                                                @(Model.Account.AvailableMoney.ToString("N"))<small class="ft-gray ft-weight-normal">(元)</small></span>
                                            ，剩余@((Model.Order.Unpaid - Model.Account.AvailableMoney).ToString("N"))元使用手机充值卡支付。
                                        </label>
                                    </div>
                                </div>
                            }
                            <div class="form-group">
                                <table class="pure-table pure-table-bordered">
                                    <caption>
                                        您的付款金额可能超限，限额如下
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th>
                                                每日限额（元）
                                            </th>
                                            <th>
                                                使用范围
                                            </th>
                                            <th>
                                                手续费
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                5000
                                            </td>
                                            <td>
                                                全国神州行卡、联通一卡充
                                            </td>
                                            <td>
                                                按面值的5%收取。
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="form-group">
                                <table class="pure-table pure-table-bordered">
                                    <thead>
                                        <tr>
                                            <th>
                                                提 醒
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                1. 暂不支持100元以上的充值卡。
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                2. 请核对卡面值与选择的面值是否一致，当卡面值大于选择的面值时，您将损失差额。
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="form-group">
                                <table class="pure-table pure-table-bordered">
                                    <thead>
                                        <tr>
                                            <th>
                                                面 值
                                            </th>
                                            <th>
                                                卡 号
                                            </th>
                                            <th>
                                                密 码
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <select style="width: 150px;">
                                                    <option value="">选择面值</option>
                                                    <option value="30">30</option>
                                                    <option value="50">50</option>
                                                    <option value="100">100</option>
                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" maxlength="17" required="required" placeholder="请输入卡号" />
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" required="required" placeholder="请输入卡密" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="form-group">
                                <p class="form-control-static">
                                    实际到账金额：</p>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2">
                                    <input type="hidden" id="package" name="package" value="0" />
                                    <button class="btn btn-danger btn-lg" type="submit">
                                        确认充值</button></div>
                                <div class="col-md-10">
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="dialog-payment" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-label"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;</button>
                <h4 class="modal-title" id="modal-label">
                    登录到网上银行支付</h4>
            </div>
            <div class="modal-body">
                <p>
                    请在新开网银页面完成付款
                </p>
                <p>
                    付款完成前请不要关闭此窗口。完成付款后请根据你的情况点击下面的按钮：
                </p>
                <p>
                    <span>付款成功</span> <a href="/recharge">查看订单状态 </a>
                </p>
                <p>
                    <span>付款失败</span> <a href="/">支付失败 </a>
                </p>
            </div>
        </div>
    </div>
</div>
@section js{
    <script type="text/javascript">
        function payConfirm(obj) {
            var password = document.getElementById('password');
            if (password != "") {
                return true;
            }
            else {
                alert(0);
                return false;
            }

        }

        function payByEBank(form) {
            var status = true;
            if (status == true) {
                $('#btn-pay-by-ebank').button('loading');
                $('#dialog-payment').modal({ keyboard: false, backdrop: 'static', show: true });
                return true;
            }
            else {
                return false;
            }
        }
        $(function () {
            $('select').select2();
        });
    </script>
}
